<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas ref="tree" :areas="treeAreas" v-on:handleNodeClick="onHandleNodeClick" />
      </el-col>
      <el-col :span="20" :xs="24" >
        <el-card v-loading="listLoading">
          <div class="filter-container">
            <el-select style="margin-left: 10px;width: 110px" class="filter-item" clearable v-model="listQuery.duration" placeholder="上传周期" >
              <el-option
                v-for="item in 10"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-button style="margin-left:40px" class="filter-item" type="primary" icon="el-icon-search"
                       @click="getList">
              查询
            </el-button>
          </div>
          <div class="app-container" id="online-chart" >
            <pie-chart v-on:handleChartClick="onHandleChartClick" :chart-data="chartData" :title="['在线', '离线']"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree'
import PieChart from "./components/PieChart";
import {onlineRatio} from "@/api/analysis";
import {getAreaTree} from "@/api/area";

export default {
  name: 'index',
  components:{PieChart, areas},
  data() {
    return {
      chartData: [],
      listQuery:{
        code:'',
        duration:'',
      },
      treeAreas:[],
      listLoading:false
    }
  },
  created() {
    this.getList()
    this.getAreaTree()
  },
  methods: {
    onHandleNodeClick:function (data) {
      if(this.listQuery.code !== data.code){
        this.listQuery.code = data.code
        this.getList()
      }
    },
    getAreaTree(type){
      getAreaTree({type:2}).then(response => {
        this.treeAreas = response.data
      })
    },
    getList(){
      this.listLoading = true
      let data = Object.assign({},this.listQuery)
      data.duration = data.duration || 2
      onlineRatio(data).then(resp => {
        this.listLoading = false
        if(resp.code === 20000){
          this.chartData = resp.data
        }
      })
    },
    onHandleChartClick(catalog){
      if(catalog === '离线'){
        let data = Object.assign({},this.listQuery)
        data.duration = data.duration || 2
        this.$router.push({ path: '/equip/records', query: data })
      }
    }
  }
}
</script>
